<template>
  <div id="app">
    <my-header>111</my-header>
    <navbar v-show="showNavbar"></navbar>
    <loading v-show="showLoading"></loading>
    <transition name="slide-down">
      <keep-alive>
        <router-view class="router-view"></router-view>
      </keep-alive>
    </transition>
    <my-footer></my-footer>
  </div>
</template>

<script>
  import MyHeader from './components/Header.vue'
  import Navbar from './components/Nav.vue'
  import MyFooter from './components/Footer.vue'
  import Home from './components/Home.vue'
  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    watch: {
      $route(from) {
        if (from.path == '/user-info') {
          this.$store.dispatch('navbar/hideNav')
        } else {
          if (this.$store.getters['navbar/show'] == false) {
            this.$store.dispatch('navbar/showNav')
          }
        }
      }
    },
    computed: {
      showNavbar () {
        return this.$store.getters['navbar/show']
      },
      showLoading () {
        return this.$store.getters['loading']
      }
    },
    components: {
      Navbar,
      Home,
      MyFooter,
      MyHeader
    }
  }
</script>

<style>

@import "assets/css/index.css";

</style>
